<template>
    <div>
        <div id="myCharts" ref="myCharts" style="width:700px;height:500px">
            
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
import dtime from 'time-formater'
export default {
    data() {
        return {
            severDay: [],
            // ['20022-8-1', '20022-8-2', '20022-8-3', '20022-8-4', '20022-8-5', '20022-8-6', '20022-8-7'],
            apiArr: [[], [], []]
        };
    },
    mounted() {
        for(let i=6;i>-1;i--){
            const date=dtime(new Date().getTime()-86400000*i).format('YYYY-MM-DD')
            this.severDay.push(date)
        }
        this.getData()
        this.getSevenData()
    },
    watch:{
        apiArr:function () {
            this.getData()
        }
    },
    methods: {
        getSevenData(){
            let apiArr=[[], [], []]
            this.severDay.forEach(item=>{
                axios.get(`https://elm.cangdu.org/statis/user/${item}/count`).then(res=>{
                    this.apiArr[0].push(res.data.count)
                })
                axios.get(`https://elm.cangdu.org/statis/order/${item}/count`).then(res=>{
                    this.apiArr[1].push(res.data.count)
                })
                axios.get(`https://elm.cangdu.org/statis/admin/${item}/count`).then(res=>{
                    this.apiArr[2].push(res.data.count)
                })
            })
            // this.apiArr=apiArr
            // console.log(this.apiArr);
        },
        getData() {
            const colors = ["#5793f3","#675bba","#d14a61"]
            const myChart = echarts.init(this.$refs.myCharts);
            let option = {
                color:colors,
                title: {
                    text: '走势图',
                    subtext: '星期走势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新用户注册', '新增订单', '新增管理员']
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {},
                        dataView: { readOnly: true },
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar', 'pie']
                        },
                        restore: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.severDay
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '用户',
                        min: 0,
                        max: 200,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单',
                        min: 0,
                        max: 200,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '新用户注册',
                        type: 'line',
                        data: this.apiArr[0],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                        }
                    },
                    {
                        name: '新增订单',
                        type: 'line',
                        data: this.apiArr[1],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                        }
                    },
                    {
                        name: '新增管理员',
                        type: 'line',
                        data: this.apiArr[2],
                        yAxisIndex: 1,
                        markPoint: {
                            data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>

<style  scoped>
</style>